<!--
  * 文章详情弹窗
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2025-01-15 10:00:00
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
  <a-modal
    v-model:open="visible"
    title="文章详情"
    width="800px"
    :footer="null"
    @cancel="handleCancel"
  >
    <div v-if="loading" class="loading-container">
      <a-spin size="large" />
    </div>
    
    <div v-else-if="articleData" class="article-detail">
      <!-- 文章基本信息 -->
      <div class="article-header">
        <h2 class="article-title">{{ articleData.title }}</h2>
        <div class="article-meta">
          <a-row :gutter="16">
            <a-col :span="6">
              <span class="meta-label">作者：</span>
              <span class="meta-value">{{ articleData.author || '未知' }}</span>
            </a-col>
            <a-col :span="8">
              <span class="meta-label">发布时间：</span>
              <span class="meta-value">{{ formatDate(articleData.publishTime) }}</span>
            </a-col>
            <a-col :span="6">
              <span class="meta-label">情感倾向：</span>
              <a-tag :color="getSentimentInfo(articleData.sentiment).color">
                {{ getSentimentInfo(articleData.sentiment).desc }}
              </a-tag>
            </a-col>
            <a-col :span="4">
              <span class="meta-label">查看次数：</span>
              <span class="meta-value">{{ articleData.viewCount }}</span>
            </a-col>
          </a-row>
        </div>
      </div>

      <a-divider />

      <!-- 文章内容 -->
      <div class="article-content">
        <h4>文章内容：</h4>
        <div class="content-text">
          {{ articleData.content }}
        </div>
      </div>

      <a-divider />

      <!-- 其他信息 -->
      <div class="article-extra">
        <a-row :gutter="16">
          <a-col :span="24" v-if="articleData.sourceUrl">
            <span class="meta-label">原文链接：</span>
            <a :href="articleData.sourceUrl" target="_blank" class="source-link">
              {{ articleData.sourceUrl }}
            </a>
          </a-col>
        </a-row>
        
        <a-row :gutter="16" style="margin-top: 16px;" v-if="articleData.keywordTags">
          <a-col :span="24">
            <span class="meta-label">关键词标签：</span>
            <span class="meta-value">{{ articleData.keywordTags }}</span>
          </a-col>
        </a-row>
      </div>

      <!-- 操作按钮 -->
      <div class="article-actions">
        <a-space>
          <a-button @click="handleCancel">关闭</a-button>
          <a-button 
            v-if="articleData.sourceUrl" 
            type="primary" 
            @click="openOriginalLink"
          >
            查看原文
          </a-button>
        </a-space>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
  import { ref } from 'vue';
  import { message } from 'ant-design-vue';
  import { newsArticleApi } from '/@/api/business/yuqing/news-article-api';
  import { getSentimentInfo } from '/@/constants/business/yuqing/yuqing-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import dayjs from 'dayjs';

  // 弹窗显示状态
  const visible = ref(false);
  
  // 加载状态
  const loading = ref(false);
  
  // 文章数据
  const articleData = ref(null);

  /**
   * 显示文章详情
   */
  async function showDetail(articleId) {
    visible.value = true;
    loading.value = true;
    articleData.value = null;

    try {
      const result = await newsArticleApi.getDetail(articleId);
      if (result.ok) {
        articleData.value = result.data;
      } else {
        message.error(result.msg || '获取文章详情失败');
        visible.value = false;
      }
    } catch (error) {
      smartSentry.captureError(error);
      message.error('获取文章详情失败');
      visible.value = false;
    } finally {
      loading.value = false;
    }
  }

  /**
   * 关闭弹窗
   */
  function handleCancel() {
    visible.value = false;
    articleData.value = null;
  }

  /**
   * 打开原文链接
   */
  function openOriginalLink() {
    if (articleData.value.sourceUrl) {
      window.open(articleData.value.sourceUrl, '_blank');
    }
  }

  /**
   * 格式化时间
   */
  function formatDate(date) {
    return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '';
  }

  // 暴露方法给父组件调用
  defineExpose({
    showDetail
  });
</script>

<style scoped>
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.article-detail {
  padding: 20px 0;
}

.article-header {
  margin-bottom: 20px;
}

.article-title {
  font-size: 20px;
  font-weight: bold;
  color: #262626;
  margin-bottom: 16px;
  line-height: 1.4;
}

.article-meta {
  background: #f5f5f5;
  padding: 12px 16px;
  border-radius: 6px;
}

.meta-label {
  font-weight: 500;
  color: #595959;
}

.meta-value {
  color: #262626;
}

.article-content {
  margin: 20px 0;
}

.content-text {
  background: #fafafa;
  padding: 16px;
  border-radius: 6px;
  border-left: 4px solid #1890ff;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 400px;
  overflow-y: auto;
}

.article-extra {
  margin: 20px 0;
}

.source-link {
  color: #1890ff;
  text-decoration: none;
}

.source-link:hover {
  text-decoration: underline;
}

.article-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}
</style> 